/* 顶部样式，增加更自然的阴影和过渡效果 */
.top {
    width: 100%;
    height: 100rpx;
    background-color: #89bff6;
    z-index: -1;
    transition: background-color 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), inset 0 0 5px rgba(0, 0, 0, 0.1); /* 增加内阴影效果 */
}

/* 标题样式，优化文本显示效果，增加阴影和过渡效果 */
.fk {
    color: #ffffff;
    font-size: 24px;
    display: inline-block;
    margin-top: 20rpx;
    margin-left: 20rpx;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    transition: text-shadow 0.3s ease;
}

/* 订单地址信息样式，增加圆润效果、优化阴影和内部元素排版，增加边框阴影 */
.address {
    width: 700rpx;
    margin: 0 auto;
    margin-top: 5rpx;
    background-color: #ffffff;
    border-radius: 16rpx;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 0 5px rgba(0, 0, 0, 0.1); /* 增加边框阴影效果 */
    position: relative;
    padding: 20rpx;
}

/* 联系人信息样式，优化显示效果，增加阴影 */
.contacts {
    display: inline-block;
    margin-left: 68rpx;
    margin-top: 16rpx;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

/* 电话信息样式，优化显示效果，增加阴影 */
.phone {
    display: inline-block;
    margin-left: 20rpx;
    margin-top: 16rpx;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

/* 地址文本样式，优化显示效果，增加阴影和换行处理 */
.ad {
    max-width: 500rpx;
    margin-left: 68rpx;
    margin-top: 12rpx;
    color: #7d7f84;
    padding-bottom: 20rpx;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    word-wrap: break-word;
}

/* 地址编辑按钮样式，优化位置和外观，增加过渡效果 */
.dz {
    position: absolute;
    bottom: 25rpx;
    left: 16rpx;
    background-color: #e8e8e8;
    color: #666666;
    border: none;
    border-radius: 24rpx;
    padding: 8rpx 16rpx;
    font-size: 12px;
    transition: background-color 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 增加按钮阴影效果 */
}

.dz:hover {
    background-color: #d0d0d0;
}

/* 背景按钮样式（可能是用于其他功能），优化位置和外观，增加过渡效果 */
.bj {
    position: absolute;
    right: 24rpx;
    top: 16rpx;
    background-color: #e8e8e8;
    color: #666666;
    border: none;
    border-radius: 24rpx;
    padding: 8rpx 16rpx;
    font-size: 12px;
    transition: background-color 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 增加按钮阴影效果 */
}

.bj:hover {
    background-color: #d0d0d0;
}

/* 订单内容样式，增加圆润效果、优化阴影和内部元素排版，增加边框阴影 */
.order-conent {
    width: 700rpx;
    margin: 0 auto;
    margin-top: 16rpx;
    background-color: #ffffff;
    border-radius: 16rpx;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 0 5px rgba(0, 0, 0, 0.1); /* 增加边框阴影效果 */
    position: relative;
    padding: 20rpx;
}

/* 订单标题、内容、备注样式，优化显示效果，增加阴影和间距 */
.order-title,
.order-conent-ct,
.order-remarks {
    display: inline-block;
    margin-left: 40rpx;
    margin-top: 16rpx;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

/* 订单标题和备注文本样式，优化显示效果，增加阴影 */
.order-title-text,
.order-remarks-text {
    color: #7d7f84;
    margin-left: 16rpx;
    font-size: 28rpx;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

/* 订单内容文本样式，优化显示效果，增加阴影、间距和排版 */
.order-conentct-text {
    display: block;
    color: #7d7f84;
    margin-left: 40rpx;
    margin-right: 10rpx;
    font-size: 28rpx;
    text-indent: 26rpx;
    letter-spacing: 2rpx;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    margin-bottom: 10rpx;
}

/* 背景按钮 2 样式（可能是用于其他功能），优化位置和外观，增加过渡效果 */
.bj2 {
    position: absolute;
    right: 24rpx;
    top: 21rpx;
    background-color: #e8e8e8;
    color: #666666;
    border: none;
    border-radius: 24rpx;
    padding: 8rpx 16rpx;
    font-size: 12px;
    transition: background-color 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 增加按钮阴影效果 */
}

.bj2:hover {
    background-color: #d0d0d0;
}

/* 订单信息样式，增加圆润效果、优化阴影和内部元素排版，增加边框阴影 */
.order {
    width: 700rpx;
    margin: 0 auto;
    margin-top: 16rpx;
    background-color: #ffffff;
    border-radius: 16rpx;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 0 5px rgba(0, 0, 0, 0.1); /* 增加边框阴影效果 */
    position: relative;
    padding: 20rpx;
}

/* 订单 ID、时间、用户等信息样式，优化显示效果，增加阴影和间距 */
.order-id,
.order-time,
.order-user,
.zf-time,
.pricetext {
    display: inline-block;
    margin-left: 40rpx;
    margin-top: 16rpx;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

/* 订单 ID、创建时间、用户名等文本样式，优化显示效果，增加阴影 */
.idtext,
.createtime,
.username {
    color: #7d7f84;
    margin-left: 16rpx;
    font-size: 28rpx;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

/* 订单 ID 浮动样式，优化外观和交互效果，增加过渡效果 */
.order-id-fz {
    display: inline-block;
    float: right;
    margin-right: 16rpx;
    margin-top: 16rpx;
    text-align: center;
    width: 88rpx;
    height: 40rpx;
    line-height: 40rpx;
    font-size: 13px;
    background-color: #3c9cff;
    color: #ffffff;
    border-radius: 8rpx;
    transition: background-color 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 增加按钮阴影效果 */
}

.order-id-fz:hover {
    background-color: #2a80e0;
}

/* 支付类型样式，优化显示效果，增加阴影 */
.zftype {
    margin-left: 16rpx;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

/* 图片列表样式，增加阴影效果和过渡效果 */
.imglist {
    width: 160rpx;
    height: 160rpx;
    margin: 8rpx 8rpx;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 0 5px rgba(0, 0, 0, 0.1); /* 增加边框阴影效果 */
    transition: box-shadow 0.3s ease;
}

.imglist:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* 接单用户样式，增加圆润效果、优化阴影和内部元素排版，增加边框阴影 */
.belongUserview {
    width: 700rpx;
    height: 200rpx;
    margin: 0 auto;
    background-color: #ffffff;
    border-radius: 16rpx;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 0 5px rgba(0, 0, 0, 0.1); /* 增加边框阴影效果 */
    position: relative;
    text-align: center;
    padding: 20rpx;
}

/* 接单用户文本样式，优化显示效果，增加阴影 */
.belongUserviewText {
    width: 100%;
    color: #7d7f84;
    line-height: 200rpx;
    font-size: 40rpx;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

/* 接单用户图片样式，优化显示效果，增加阴影和过渡效果 */
.belongUserview-user-img {
    position: absolute;
    top: 42rpx;
    left: 16rpx;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: box-shadow 0.3s ease;
}

.belongUserview-user-img:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* 接单用户名样式，优化显示效果，增加阴影 */
.belongUserview-name {
    position: absolute;
    left: 160rpx;
    top: 58rpx;
    color: #7d7f84;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

/* 接单用户 ID 样式，优化显示效果，增加阴影 */
.belongUserview-id {
    position: absolute;
    left: 156rpx;
    top: 112rpx;
    color: #7d7f84;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

/* 联系用户按钮样式，优化外观和交互效果，增加过渡效果 */
.contactUser {
    position: absolute;
    right: 40rpx;
    top: 76rpx;
    background-color: #e8e8e8;
    color: #666666;
    border: none;
    border-radius: 24rpx;
    padding: 8rpx 16rpx;
    font-size: 12px;
    transition: background-color 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 增加按钮阴影效果 */
}

.contactUser:hover {
    background-color: #d0d0d0;
}

/* 价格样式，优化显示效果，增加阴影 */
.price {
    color: #ff5500;
    margin-left: 16rpx;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

/* 地址模态框样式，优化排版和显示效果 */
/* 新增地址模态框 */
.v-name {
    width: 600rpx;
    margin-bottom: 20rpx;
}

.mname,
.mphone,
.maddress {
    margin-left: 8rpx;
    float: left;
    margin-top: 2rpx;
}

.name-input,
.phone-input {
    display: inline-block;
    width: 224rpx;
    float: right;
}

/* 联系电话样式，优化排版和显示效果 */
.v-phone {
    width: 600rpx;
    margin-top: 24rpx;
}

/* 地址样式，优化排版和显示效果 */
.v-address {
    width: 600rpx;
    margin-top: 24rpx;
}

.address-input {
    display: inline-block;
    width: 224rpx;
    float: right;
}

/*订单内容样式（这里不太清楚 bb 类的具体用途，如果需要更多优化可以进一步调整）*/
.bb {
    width: 100%;
}

/* 订单按钮样式，优化外观和交互效果，增加过渡效果 */
.orderbutton {
    width: 700rpx;
    margin: 0 auto;
    margin-top: 40rpx;
    margin-bottom: 80rpx;
}

.ljfk {
    display: inline-block;
    text-align: center;
    margin-top: 16rpx;
    width: 100%;
    height: 64rpx;
    line-height: 64rpx;
    font-size: 16px;
    background-color: #3c9cff;
    color: #ffffff;
    border-radius: 8rpx;
    transition: background-color 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 增加按钮阴影效果 */
}

.ljfk:hover {
    background-color: #2a80e0;
}

.ljjd {
    display: inline-block;
    text-align: center;
    margin-top: 16rpx;
    width: 100%;
    height: 64rpx;
    line-height: 64rpx;
    font-size: 16px;
    background-color: #3c9cff;
    color: #ffffff;
    border-radius: 8rpx;
    transition: background-color 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 增加按钮阴影效果 */
}

.ljjd:hover {
    background-color: #2a80e0;
}

/* 可能是特定框架下的空文本样式（不太清楚具体功能，如果需要更多优化可以进一步调整） */
/deep/ .u-empty__text.data-v-7ebed0e2 {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 20rpx;
    margin-bottom: 20rpx;
}